
<template>
    <!-- 基本信息管理/店铺管理 -->
    <div class="shopMng">
        <div class="top_operation">
            
            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="every_operation">
                <span>商家：</span>
                <a-select style="width: 195px" 
                    show-search
                    :filter-option="filterOption"
                    @change="customerChange" 
                    v-model="customerCode"
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in customerList" :value="item.customerCode">
                        {{item.customerName}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>平台名称：</span>
                <a-select style="width: 195px" 
                    show-search
                    :filter-option="filterOption"
                    @change="handleChange" 
                    v-model="platformCode" 
                    allowClear>
                    <a-select-option :key="index" v-for="(item, index) in platformList" :value="item.platformCode">
                        {{item.platformCode}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>店铺编码：</span>
                <a-select style="width: 195px" 
                    show-search
                    :filter-option="filterOption"
                    @change="handleChange" 
                    v-model="shopCode" 
                    allowClear>
                    <a-select-option :key="index" v-for="(item, index) in shopList" :value="item.shopCode">
                        {{item.shopCode}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>
        <!-- <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div> -->

        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    >
                </a-table>
                <!-- 未用到 -->
                    <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"  -->
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            ellipsis: true,
            width: 80,
            customRender:(taxe,records,index)=>`${index + 1}`
        },
        {
            title: '店铺名称',
            dataIndex: 'shopName',
            key: 'shopName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '店铺编码',
            dataIndex: 'shopCode',
            key: 'shopCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '平台',
            dataIndex: 'platformCode',
            key: 'platformCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '联系人',
            dataIndex: 'contacts',
            key: 'contacts',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '联系电话',
            dataIndex: 'telephone',
            key: 'telephone',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '国家',
            dataIndex: 'countryCode',
            key: 'countryCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '省',
            dataIndex: 'province',
            key: 'province',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '市',
            dataIndex: 'city',
            key: 'city',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '区',
            dataIndex: 'area',
            key: 'area',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '村镇街道',
            dataIndex: 'town',
            key: 'town',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '详细地址',
            dataIndex: 'detailAddress',
            key: 'detailAddress',
            align: 'center',
            ellipsis: true,
        },
    ];

    import TopSelect from '../meter/TopSelect'
    import BottomPagination from '../meter/BottomPagination'
    import { getHeadquarters, getRegion, getCity, getWarehouse, getCustomerName, getplatformName, getShopList, getShopName, } from '@/api/api'
    export default {
        name: 'shopMng',
        components: {
            TopSelect,
            BottomPagination
        },
        data () {
            return {
                business: '',
                platformName: '',
                shopName: '',
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                regionList: [],
                cityList: [],
                warehouseList: [],
                customerCode: '',
                customerList: [],
                platformCode: '',
                platformList: [],
                shopCode: '',
                shopList: [],
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                pageNo: 1,
                pageSize: 10,
                total: 0,
            }
        },
        created() {
            this.getHeadquartersList()
        },
        methods: {
            // 选择器
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 搜索
            onSearch() {
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    this.getShopList()
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.regionId = ''
                this.cityId = ''
                this.organizeId = ''
                this.cityList = []
                this.warehouseList = []
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
                this.customerCode = ''
                this.customerList = []
                this.platformCode = ''
                this.platformList = []
                this.shopCode = ''
                this.shopList = []
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.getRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length === 1){
                            this.regionId = this.regionList[0].id
                            this.getCityList()
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.regionId = value 
                this.cityId = ''
                this.organizeId = ''
                this.cityList = []
                this.warehouseList = []
                this.getCityList()
                this.customerCode = ''
                this.customerList = []
                this.platformCode = ''
                this.platformList = []
                this.shopCode = ''
                this.shopList = []
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length === 1){
                            this.cityId = this.cityList[0].id
                            this.getWarehouseList()
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.cityId = value
                this.organizeId = ''
                this.warehouseList = []
                this.getWarehouseList()
                this.customerCode = ''
                this.customerList = []
                this.platformCode = ''
                this.platformList = []
                this.shopCode = ''
                this.shopList = []
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length === 1){
                            this.organizeId = this.warehouseList[0].id
                            this.code = this.warehouseList[0].code
                            // this.onSearch()
                            this.getCustomerName()
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList) {
                    if(item.id === this.organizeId) {
                        this.code = item.code
                        this.getCustomerName()
                        this.customerCode = ''
                        this.customerList = []
                        this.platformCode = ''
                        this.platformList = []
                        this.shopCode = ''
                        this.shopList = []
                    }
                }
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getShopList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getShopList()
            },
            // 获取客户名称列表
            getCustomerName() {
                let params = {
                    whCode: this.code,
                }
                getCustomerName(params).then((res)=>{
                    if(res.success){
                        this.customerList = res.result
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择商家
            customerChange() {
                this.platformCode = ''
                this.shopCode = ''
                if(this.customerCode){
                    this.getplatformName()
                    this.getShopName()
                }
            },
            // 获取平台名称列表
            getplatformName() {
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                }
                getplatformName(params).then((res)=>{
                    if(res.success){
                        this.platformList = res.result
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 获取店铺名称列表
            getShopName() {
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                    platformCode: this.platformCode,
                }
                getShopName(params).then((res)=>{
                    if(res.success){
                        this.shopList = res.result
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 获取店铺列表
            getShopList() {
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                    platformCode: this.platformCode,
                    shopCode: this.shopCode,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                }
                this.tableLoading = true
                getShopList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result.records
                        this.total = res.result.total
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .shopMng {
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>
